<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五角星评分</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <style>
        * {
          padding: 0;
          margin: 0;
        }
    
        .comment {
          font-size: 40px;
          color: red;
        }
    
        .comment li {
          float: left;
          cursor: pointer;
        }
    
        ul {
          list-style: none;
        }
      </style>
</head>
<body>
    <ul class="comment">
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
    </ul>
<script>
    $(function(){
        /**
            主要的实现思路是
            鼠标移入到li标签上，当前li标签和他之前的li标签显示实心五角心，
            后面的li显示空心五角心。鼠标离开li,所有的li都变成空心。
            点击li，鼠标离开后，刚才点击的那个li和之前的li都变成实心五角心，后面为空心五角。
        */
        /*
        a)	首先声明两个个变量，分别记录这个实心/空心五角心
        b)	当前鼠标移入的li和他之前的兄弟li都显示实心五角心
        c)	当前鼠标移入的li之后的兄弟li都显示空心五角心
        d)	获取刚才点击的那个li
        e)	给当前鼠标点击的这个li添加一个独一无二的属性clickCurrent
        */
        var sx_wjx =  '★';
        var kx_wjx =  '☆';
        $('.comment>li').on("mouseenter",function(){
            $(this).text(sx_wjx).prevAll().text(sx_wjx).end().nextAll().text(kx_wjx)
        }).on("mouseleave",function(){
            $('.comment>li').text(kx_wjx);

            $('.comment>li[clickCurrent]').text(sx_wjx).prevAll().text(sx_wjx);
        }).on('click',function(){
            $(this).attr('clickCurrent','current').siblings().removeAttr("clickCurrent");
            
        })
    })
</script>
</body>
</html>